import React,{useState} from 'react'
/*
    一、状态Hook的操作步骤
    1、从react依赖包中导入useState函数
    import {useState} from 'react'
    2、在函数组件的内部调用useState这个方法
    const [状态,修改状态的方法]=useState(初始化变量)
    3、注意：如果状态的值没有发生变化是否做了优化
    stateHook对于引用数据类型是进行浅比较的操作，如果是引用数据类型，堆内存的内容发生了变化，但是栈内存空间的地址
    没有变化，它是不会重新渲染页面的，如果要让它重新渲染，需要新的地址才可以。
    二、关于初始值的写法
    const [状态,修改状态的方法]=useState(()=>{return 值})
*/
export default function Count() {
  const [num,setNum]=useState(0)
  const [list,setList]=useState([1,2,3])
  const styleObj={
    width:'50px',
    height:'50px',
    borderRadius:'50%',
    backgroundColor:'springgreen',
    margin:'10px',
    display:'flex',
    justifyContent:'center',
    alignItems:'center',
    fontSize:'38px',
    color:'white'
  }
  const increment=()=>{
    setNum(Math.floor(Math.random()*3))
  }
  console.log('-------render-----------');
  return (
    <div>
        <h2>计数器</h2>
        <div>{num}</div>
        <button onClick={increment}>+</button>
        <hr />
        <div style={{display:'flex'}}>
            {
                list.map(item=><div key={item} style={styleObj}>
                    {item}
                </div>)
            }
        </div>
        <button onClick={()=>{
            list.push(4)
            setList([...list])
        }}>添加</button>
        
    </div>
  )
}
